<template>
    <div>
        <h1>没有设置命名空间</h1>
        <div class="wrap">
            <h2>state</h2>
            <p>name:{{  name}}</p>
            <p>age:{{  age}}</p>
        </div>

        <div class="wrap">
            <h2>getters</h2>
            <p>是否成年:{{ isGrowUp}}</p>
        </div>

        <div class="wrap">
            <h2>mutations</h2>
            <p>
                <button @click="addAge">age++</button>
                <button @click="reduceAge">age--</button>

            </p>

        </div>


        <div class="wrap">
            <h2>actions</h2>
            <p>
                <button @click="addAge_Async">age++</button>
                <button @click="reduceAge_Async">age--</button>
            </p>

        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
    computed: {
        // ...mapState({
        //     name: function (state) {
        //         return state.user.name
        //     },
        //     age: function (state) {
        //         return state.user.age;
        //     },
        // })

        ...mapState("user",["name","age"]),

        ...mapGetters("user",["isGrowUp"]),
    },
    methods: {
        ...mapMutations("user",["addAge","reduceAge"]),
        ...mapActions("user",["addAge_Async","reduceAge_Async"]),
    },
    mounted() {
        console.log("根store", this.$store);
    }
}
</script>

<style scoped>
.wrap {
    padding: 5px;
    border: 1px dashed #333;
    margin: 5px;
}
</style>